/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Row, Col, Tabs, Card, InputNumber, Tag, message } from 'antd';
import Container from '../../components/common/Container';
import MyTable from '../../components/common/MyTable';
import PublicService from '../../services/PublicService';
import FiltrateUpgrade from '../../components/common/FiltrateUpgrade';
import moment from 'moment';
import MyPagination from '../../components/common/MyPagination';
import request from '../../utils/request';
import style from './Public.less';
class Public extends Component {
    constructor(props) {
        super(props)
        this.columns = [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",

            },
            {
                title: '投诉时间',
                dataIndex: 'createTime',
                width: '15%',
                align: "center",

            },
            {
                title: '投诉类型',
                dataIndex: 'complaintWay',
                width: '8%',
                align: "center",
                render: (text, record) => <span>{record.complaintWay !== 1 ? "实名投诉" : "匿名投诉"}</span>
            },
            {
                title: '投诉人',
                width: '8%',
                dataIndex: 'linkman',
                align: "center",
                render: (text, record) => <span>{text?text:"/"}</span>
            },
            {
                title: '联系方式',
                dataIndex: 'linkWay',
                width: '10%',
                align: "center",
                render: (text, record) => <span>{text?text:"/"}</span>
            },
            {
                title: '投诉对象',
                dataIndex: 'gasStationName',
                width: '8%',
                align: "center",
                render: (text, record) => <span>{record.gasStationName}{record.gasStationName2}</span>
            },
            {
                title: '投诉对象地址',
                dataIndex: 'address',
                width: '10%',
                align: "center",
            },
            {
                title: '违法行为',
                dataIndex: 'irregularities',
                width: '15%',
                align: "center",
                render: (text, record) => <span>
                    {text}
                    <span style={{ width: 5, height: 20, backgroundColor: record.status == 1 ? "#52c41a" : "#f5222d", position: "absolute", left: 0 }}>
                    </span>
                </span>
            },
            {
                title: '投诉状态',
                dataIndex: 'status',
                width: '10%',
                align: "center",
                render: (text, record) => <span>{record.status == 1 ? "已回复" : "未回复"}</span>
            },
            {
                title: '操作',
                dataIndex: 'userName',
                width: '22%',
                align: "center",
                render: (text, record) => {
                    return <span>

                        <Tag color={record.replyContent == "" ? "#40a9ff" : "#ccc"} onClick={this.onReply.bind(this, record)}>回复</Tag>
                        <Tag color="#40a9ff" onClick={this.onDetails.bind(this, record)}>详情</Tag>
                    </span>

                }
            },

        ];

    }
    state = {
        page: 1,
        rows: 10,
        total: 0,
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        status:""
    }
    componentDidMount() {


        this.onSubmit(1, 10)

    }
    onSelectedChange = () => {

    }
    onA = () => {
        this.props.history.goBack()
    }
    //详情按钮
    onDetails = (record) => {
        PublicService.setCookie('Publicid', record.id);
        this.props.history.push('/PubDetails');
    }
    //回复按钮
    onReply = (record) => {
        if (record.replyContent) {
            message.warning("该投诉已回复!")
            return
        }
        PublicService.setCookie('Publicid', record.id);
        this.props.history.push('/PubReply');
    }

    //查询
    onSubmit = (page, rows, val) => {
        console.log(val)
        this.setState({
            loading:true
        })
            request({
                url: '/zhrq-web/socialsentiment/complaint/pageList',
                method: 'POST',
                data: {
                    page,rows,
                    complaintWay:val && val.complaintWay ?val.complaintWay:"",
                    endTime: val &&val.endTime ? moment(val.endTime).format("YYYY-MM-DD HH:mm:ss") : "",
                    startTime: val &&val.startTime ? moment(val.startTime).format("YYYY-MM-DD HH:mm:ss") : "",
                    gasStationName: val && val.gasStationName ?val.gasStationName:"",
                    status:this.state.status
                }
            }).then(data => {
                console.log(data)
                if (data.rc == 0) {
                    data.ret.items.forEach((item) => {
                        item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                    })
                    this.setState({
                        dataSource: data.ret.items,
                        total: data.ret.rowCount
                    })
                    setTimeout(() => {
                        this.setState({
                            loading:false
                        })
                    },500)
                }


            })

    }

    onTag = (status) => {
        this.setState({
            status
        })
        setTimeout(() => {
            this.onSubmit(1, 10)
        }, 500)
    }

        //分页器
        onChangePage = (page, size) => {
            this.onSubmit(page, size);
            this.setState({
                page,
                rows: size,
                pageIndex: page,
                pageSize: size
            })
        };

    render() {
        const {total, loading, selectedRowKeys, dataSource, pageIndex, pageSize } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.columns
        const height = document.body.clientHeight;
        let containerHeight = '77vh';
        if (windowWidth > 1367) {
            containerHeight = '79vh';
        }
        const items = [
            {
                type: 'datePicker',
                label: '投诉开始时间',
                paramName: 'startTime',
                placeholder: '请输入',
                width: 200
            },
            {
                type: 'datePicker',
                label: '投诉结束时间',
                paramName: 'endTime',
                placeholder: '请输入',
                width: 200
            },
            {
                type: 'select',
                label: '投诉对象',
                paramName: 'gasStationName',
                placeholder: '请输入',
                style: { width: 180 },
                options: [
                    { text: '全部', value: '' },
                    { text: '#1燃气站', value: '#1燃气站' },
                    { text: '#2燃气站', value: '#2燃气站' },
                    { text: '#3燃气站', value: '#3燃气站' },
                    { text: '#4燃气站', value: '#4燃气站' },
                    { text: '#5燃气站', value: '#5燃气站' },
                    { text: '#6燃气站', value: '#6燃气站' },
                    { text: '#7燃气站', value: '#7燃气站' },
                    { text: '#8燃气站', value: '#8燃气站' },
                    { text: '#9燃气站', value: '#9燃气站' },
                ]
            },
            {
                type: 'select',
                label: '投诉类型',
                paramName: 'alarmType',
                placeholder: '请输入',
                style: { width: 180 },
                options: [
                    { text: '全部', value: '' },
                    { text: '实名举报', value: '1' },
                    { text: '匿名举报', value: '2' },
                ]
            },


        ];

        return (
            <div style={{ marginBottom: "1vh" }}>
             <div style={{height:"1vh"}}> </div>
                <FiltrateUpgrade
                    items={items}
                    style={{ width: windowWidth > 1900 ? '71%' : '65%' }}
                    ref={ref => { this.f1 = ref }}
                    submit={this.onSubmit.bind(this, 1, 10)}
                    selectedChange={this.onSelectedChange}
                // btnRight={true}
                // height={windowWidth > 1900 ? 136 : 126}
                />
                <Container
                    style={{ height: containerHeight, position: "relative" }}
                // exportBtnShow={true}
                // exportBtn={this.exportBtn}
                // addBtnText={this.addBtnText}
                // examineBtn={this.examineBtn}
                // editBtn={this.editBtn}
                // lockBtn={this.lockBtn}
                // clearlockBtn={this.clearlockBtn}
                // setDelConfirm={this.setDelConfirm}
                // addBtnShow={true}
                // deleteBtnShow={true}
                // editBtnShow={true}
                // examineBtnShow={true}
                // lockBtnShow={true}
                // clearlockBtnShow={true}
                >
                    <div className={style.Con_header}>
                    <Tag color={this.state.status === "" ? "#108ee9": "blue"} onClick={this.onTag.bind(this, "")}>全部</Tag>
                        <Tag color={this.state.status === 0 ? "#fc1808":"red"} onClick={this.onTag.bind(this, 0)}>未回复</Tag>
                        <Tag color={this.state.status === 1 ?  "#52c41a":"green"} onClick={this.onTag.bind(this, 1)}>已回复</Tag>
                    </div>
                    <div style={{ height: "60vh", overflow: "auto" }}>
                        <MyTable
                            // bordered
                            loading={loading}
                            columns={columns}
                            // rowSelection={rowSelection}
                            pagination={false}
                            // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                            dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        />

                    </div>
                    <MyPagination
                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage}
                        onShowSizeChange={this.onChangePage}
                    />
                </Container>
            </div>
        )
    }
}
export default (Public);
